<html>
    <head>
        <script>
			const dicta={
				"key0":'',
				"key1":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div>',
				"key2":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div>',
				"key3":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div>',
				"key4":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div>',
				"key5":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div>',
				"key6":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div>',
				"key7":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div>',
				"key8":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div>',
				"key9":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div>						',
				"key10":'<div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: red;  display:inline-block"></div><div style="width: 9%; height: 50px; border:1px solid black; background-color: blue;display:inline-block"></div>',
			}
			function  load(){
				document.getElementById("key10").innerHTML = dicta["key10"];
			}

			function n1change(){
				var n1=document.getElementById("n1").value;
				console.log(n1);
				var n2=document.getElementById("n1Div");
				n2.inertHTML = '';
				n2.innerHTML = dicta["key"+n1];
				console.log(n2.innerHTML);
			}
			function n2change(){
				var n=document.getElementById("n1").value;
				var n1=document.getElementById("n2").value;
				var n2=document.getElementById("n2Div");
				n2.inertHTML = '';
				n2.innerHTML = "<div style=\"width:+"+parseInt(n)*9+"%;height:50px;display:inline-block; background-color:white;border:2px dashed red;\"></div>" + dicta["key"+n1];
			}
			function n3count(){
				var n1=document.getElementById("n1").value;
				var n2=document.getElementById("n2").value;
				
				var n3=document.getElementById("n3Div");
				n3.inertHTML = '';
				n3.innerHTML = "<span style=\"padding:15px 0px;background-color:brown\">"+dicta["key"+n1]+"</span><span style=\"padding:15px 0px;background-color:yellow\">"+dicta["key"+n2]+"</span>";

				var n3value = parseInt(n1) + parseInt(n2);
				document.getElementById("n3").value = n3value;

				
			}
		</script>
    </head>
    <body onload="load()">
		<div> <center>
				<input type="text"  id = "n1" style="width: 50px; height: 50px; font-size: 30px; text-align: center;" onblur="n1change()" />
				<h2 style="display: inline-block;">+</h2>
				<input type="text"  id = "n2" style="width: 50px; height: 50px; font-size: 30px; text-align: center;" onblur="n2change()"/>
				<h2 style="display: inline-block;">=</h2>
				<input type="text"  id = "n3" style="width: 50px; height: 50px; font-size: 30px; text-align: center;" onblur="n3count()"/>
		</center></div>

		<div id="n1Div" style="width: 100%; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; margin-top: 20px; padding: 10px; overflow-y: auto;"></div>
		<center><h2>+</h2></center>	
		<div id="n2Div" style="width: 100%; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; margin-top: 20px; padding: 10px; overflow-y: auto;"></div>
		<center><h2>=</h2></center>
		<div id="n3Div" style="width: 100%; height: 120px; background-color: #f0f0f0; border: 1px solid #ccc; margin-top: 5px; padding: 10px; overflow-y: auto;"></div>
		
		<div id="key10" style="width: 100%; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; margin-top: 20px; padding: 10px; overflow-y: auto;"></div>
		
    </body>
</html>
